<template>
  <div id="app">
    <!-- 使用导航组件 -->
    <HeaderNav 
      :site-title="'我的网站'" 
      :nav-items="customNavItems" 
      :user-info="currentUser" 
      @menu-item-click="handleMenuClick"
    />
    
    <!-- 页面内容区域 -->
    <main class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
  </div>
</template>

<script>
import HeaderNav from './components/HeaderNav.vue'

export default {
  name: 'App',
  components: {
    HeaderNav
  },
  data() {
    return {
      // 自定义导航项
      customNavItems: [
        { name: '首页', path: '/' },
        { name: '关于我们', path: '/about' },
        { name: '产品中心', path: '/products' },
        { name: '服务支持', path: '/services' },
        { name: '联系我们', path: '/contact' }
      ],
      // 当前用户信息
      currentUser: {
        name: '张三'
      }
    }
  },
  methods: {
    // 处理用户菜单点击事件
    handleMenuClick(action) {
      console.log('用户菜单点击:', action);
      
      switch (action) {
        case 'profile':
          // 跳转到个人资料页面
          this.$router.push('/profile');
          break;
        case 'settings':
          // 跳转到设置页面
          this.$router.push('/settings');
          break;
        case 'logout':
          // 处理退出登录逻辑
          if (confirm('确定要退出登录吗？')) {
            console.log('用户退出登录');
            // 这里可以添加登出逻辑
          }
          break;
      }
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.main-content {
  min-height: calc(100vh - 60px);
  padding: 20px;
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>